<!DOCTYPE html>
<html lang="en">
<!--
Copyright 2017 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,
              maximum-scale=1.0, user-scalable=no">
  <title>System Internals</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="module" src="main.js"></script>
</head>
<body>
  <div id="sys-internals-drawer" class="hidden" hidden>
    <div id="drawer-menu" class="hidden">
      <div id="drawer-title"></div>
      <hr>
      <a class="drawer-item" href="#">
        <div class="icon">
          <img src="/images/info.svg">
        </div>
        Info
      </a>
      <hr>
      <a class="drawer-item" href="#CPU">
        <div class="icon">
          <img src="/images/cpu.svg">
        </div>
        CPU
      </a>
      <a class="drawer-item" href="#Memory">
        <div class="icon">
          <img src="/images/memory.svg">
        </div>
        Memory
      </a>
      <a class="drawer-item" href="#Zram">
        <div class="icon">
          <img src="/images/zram.svg">
        </div>
        Zram
      </a>
    </div>
  </div>
  <div id="sys-internals-nav">
    <div id="nav-menu-btn">
      <img src="/images/menu.svg">
    </div>
  </div>
  <div id="sys-internals-body">
    <div id="chart-root" class="line-chart-root"></div>
    <div id="infopage-root">
      <div class="infopage-panel">
        <h2>CPU</h2>
        <div class="title">Number of Cores</div>
        <div class="content" id="infopage-num-of-cpu"></div>
        <div class="title">Usage</div>
        <div class="content" id="infopage-cpu-usage"></div>
        <div class="title">Kernel Time</div>
        <div class="content" id="infopage-cpu-kernel"></div>
        <div class="title">User Time</div>
        <div class="content" id="infopage-cpu-user"></div>
        <div class="title">Idle Time</div>
        <div class="content" id="infopage-cpu-idle"></div>
      </div>
      <div class="infopage-panel">
        <h2>Memory</h2>
        <div class="title">Total Memory</div>
        <div class="content" id="infopage-memory-total"></div>
        <div class="title">Used Memory</div>
        <div class="content" id="infopage-memory-used"></div>
        <div class="title">Total Swap</div>
        <div class="content" id="infopage-memory-swap-total">
        </div>
        <div class="title">Used Swap</div>
        <div class="content" id="infopage-memory-swap-used">
        </div>
      </div>
      <div class="infopage-panel">
        <h2>Zram</h2>
        <div class="title">Total Used Memory</div>
        <div class="content" id="infopage-zram-total"></div>
        <div class="title">Original Memory Size</div>
        <div class="content" id="infopage-zram-orig"></div>
        <div class="title">Compressed Memory Size</div>
        <div class="content" id="infopage-zram-compr"></div>
        <div class="title">Compression Ratio</div>
        <div class="content" id="infopage-zram-compr-ratio">
        </div>
      </div>
    </div>
  </div>
</body>
</html>
